<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
     canvas三要素
     id:唯一标识
     width:画布内容宽度的像素大小
     height:画布内容高度的像素大小
   -->
    <canvas id="canvas1" width="800" height="600">
      这里的内容画布是不显示的
    </canvas>
  </body>
  <script>
    //1.找到画布对象
    var canvas1 = document.querySelector("#canvas1");
    //2.找到上下文对象(画笔对象)这边是2d引擎的
    var ctx = canvas1.getContext("2d");
    //3.绘制图像
    // 第一个矩形为目标图像
    ctx.fillStyle="hotpink"
    ctx.fillRect(100,100,200,200)

    ctx.globalCompositeOperation="xor"
    console.log(ctx);
    /*globalCompositeOperation默认为source-over,源图像叠加在目标图像上*/
    /*source-in 显示两图像交集部分,以源图像交集为主*/
    /*source-out 显示集合源图像-目标图像*/
    /*destination-over 将目标图像置于顶层*/
    /*destination-atop 只显示源图像区域内的*/
    /*destination-in 显示交集,以目标图像交集为主*/
    /*destination-out 显示集合目标图像-源图像*/
    /*lighter 交集部分为透明*/
    /*copy 显示源图像忽略目标图像*/
    /*xor 异或形式,在这等同于lighter*/

    // 第二个矩形为源图像
    ctx.fillStyle="deepskyblue"
    ctx.fillRect(200,200,200,200)
  </script>
</html>